<template>
  <el-card class="box-card2" ref="boxcard2">
    <template #header>
      <div class="card-header">
        <IAntDesignLineChartOutlined></IAntDesignLineChartOutlined>
        <span>{{ $t("home.visits") }}</span>
        <el-tag>{{ "2022" }}</el-tag>
      </div>
    </template>
    <div class="content" ref="card2"></div>
  </el-card>
</template>
<script lang="ts">
export default {
  // name: "card2",
};
</script>
<script lang="ts" setup>
import { useDaside } from "../../store/Daside";
import { useDheader } from "../../store/Dheader";
const Daside = useDaside();
const Dheader = useDheader();
// const color = Daside.aside.settings.themeColor;
const { proxy } = getCurrentInstance() as any;
const echarts = proxy.$echarts;
let option = {
  color: Daside.aside.settings.colors[Daside.aside.settings.themeColor],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
      label: {
        precision: 0, //悬停数值显示整数
      },
    },
    confine: true,
  },
  legend: {
    data: ["访问量柱状", "访问量折线"],
  },
  xAxis: [
    {
      type: "category",
      data: ["8-1", "8-2", "8-3", "8-4", "8-5"],
      axisPointer: {
        type: "shadow",
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "访问量",
      minInterval: 1,
      max: 500,
      axisLabel: {
        formatter: "{value}次",
      },
    },
    {
      type: "value",
      name: "访问量",
      minInterval: 1,
      max: 500,
      axisLabel: {
        formatter: "{value}次",
      },
    },
  ],
  series: [
    {
      name: "访问量柱状",
      type: "bar",
      tooltip: {
        valueFormatter: (value: string) => {
          return value + " 次";
        },
      },
      barWidth: 20, //柱图宽度
      data: [55, 67, 220, 342, 453],
    },
    {
      name: "访问量折线",
      type: "line",
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: (value: string) => {
          return value + "次";
        },
      },
      data: [55, 67, 220, 342, 453],
    },
  ],
  grid: {
    bottom: 0,
    containLabel: true, //防止遮挡
  },
};
const card2 = ref();
const boxcard2 = ref();
onMounted(() => {
  let myChart = echarts.init(card2.value);
  option && myChart.setOption(option);

  if (window.innerWidth < 1200 && window.innerWidth > 700)
    boxcard2.value.$el.style.width = Dheader.header.width / 2 - 32 + "px";
  else boxcard2.value.$el.style.width = "100%";
  setTimeout(() => {
    myChart.resize();
  }, 400);
  watch(
    () => Dheader.header.width,
    (newValue, oldValue) => {
      if (window.innerWidth < 1200 && window.innerWidth > 700)
        boxcard2.value.$el.style.width = newValue / 2 - 32 + "px";
      else boxcard2.value.$el.style.width = "100%";
      setTimeout(() => {
        myChart.resize();
      }, 400);
    }
  );
});
</script>

<style lang="scss" scoped>
.box-card2 {
  width: 100%;
  min-width: 300px;
  height: fit-content;
  min-height: 300px;
  .card-header {
    .el-tag {
      margin-left: auto;
    }
  }
  .content {
    width: 100%;
    min-width: 300px;
    height: 100%;
    min-height: 240px;
  }
}
</style>
